<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>日常项目-2016年道路大中修工程</title>
      <meta name="keywords" content="">
      <meta name="description" content="">
      <link rel="shortcut icon" href="favicon.ico">
      <link th:href="@{/public/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
      <link th:href="@{/css/Daily_items/daily_data.css}" rel="stylesheet">
      <link th:href="@{/css/Daily_items/font-awesome.css?v=4.4.0}" rel="stylesheet">
      <link th:href="@{/css/Daily_items/plugins/iCheck/custom.css}" rel="stylesheet">
      <link th:href="@{/css/Daily_items/animate.css}" rel="stylesheet">
      <link th:href="@{/css/Daily_items/style.css?v=4.1.0}" rel="stylesheet">
      <link type="text/css " rel="stylesheet" th:href="@{/css/Daily_items/ding.css}">
       
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<!-- 引入页面头header-fragment -->
<div th:replace="header::header-nav"></div>
<!-- 引入工具栏sidebar-fragment -->
<!--/*@thymesVar id="path" type="templates"*/-->
<div th:replace="sidebar::sidebar-fragment(${path})"></div>

<div id="page-wrapper" class="gray-bg dashbard-4">
        <div class="row">
            <div class="bread">
                <ol class="breadcrumb">
                    <li><a href="#">日常项目</a></li>
                    <li class="active" style="">道路大中修</li>
                </ol>
            </div>
            <div class="query">
                <div class="query_text">查询条件</div>
                <div class="query_up">
                    <div class="col-sm-6">
                        <div id="road_name1">
                            <input type="text" id="roadName" name="roadName" class="form-control" placeholder="请输入道路名称" aria-label="请输入道路名称"
                                    th:value="${list!=null and list.roadName!=null }?${list.roadName}:''" required="true">
                            <button class="btn btn-secondary" type="button">
                                <span class="glyphicon glyphicon-search" style="" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="date01">
                            <input type="text" id="roadPlace" name="roadPlace" class="form-control" placeholder="请输入起止点名称" aria-label="请输入起止点名称"
                                   th:value="${list!=null and list.roadPlace!=null }?${list.roadPlace}:''" required="true">
                            <button class="btn btn-secondary" type="button">
                                <span class="glyphicon glyphicon-search"  aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="query_buttom" >
                    <button type="button" class="btn btn-default" id="search" onclick="searchs()">查询</button>
                </div>
            </div>
            <div class="query_result">查询结果</div>
            <div class="text">
                <table class="road_repair" th:fragment="road_repair">
                    <thead>
                        <tr>
                            <th><h4>序号</h4></th>
                            <th><h4>道路名称</h4></th>
                            <th><h4>起止地点</h4></th>
                            <th><h4>道路长度（米）</h4></th>
                            <th><h4>道路宽度（米）</h4></th>
                            <th><h4>沥青面积（平米）</h4></th>
                            <th><h4>步道面积（平米）</h4></th>
                            <th><h4>备注</h4></th>
                            <th><h4>特殊情况备案</h4></th>
                            <th><h4>地图查看</h4></th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="repairEntity : ${list}">
                            <td th:text="${repairEntity.id}"></td>
                            <td th:text="${repairEntity.roadName}"></td>
                            <td th:text="${repairEntity.roadPlace}"></td>
                            <td th:text="${repairEntity.roadLength}"></td>
                            <td th:text="${repairEntity.roadWidth}"></td>
                            <td th:text="${repairEntity.liqingArea}"></td>
                            <td th:text="${repairEntity.footpathArea}"></td>
                            <td th:text="${repairEntity.roadRemark}"></td>
                            <td width="100" class="app"><input type="button" value="查看详情" th:text="${repairEntity.roadSpecialCase}"/></td>
                            <td><button class="btn btn-secondary" type="button"  data-toggle="modal" data-target="#myModal" th:text="${repairEntity.mapView}">
                                <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                            </button></td>
                        </tr>
                    </tbody>
                </table>
                <div class="row pagination-wrap" style="text-align: center">
                    <ul class="pagination pagination-large">
                        <li><a href="#">前一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">后一页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <p>地图显示</p>
                <div class="map" ><img alt="image" th:src="@{/image/Daily_items/地图.jpg}" /></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/Daily_items/ding.js}"></script>
    <script th:src="@{/public/jquery/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/public/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/vue/axios.min.js}"></script>
    <script th:src="@{/js/vue/vue.js}"></script>
    <script th:src="@{/js/public.js}"></script>
</body>

</html>
